<template>
	<view class="logon">
		<view class="list">
			<view class="list-call">
				<input class="phone" type="phone" v-model="phone" maxlength="11" placeholder-style="color:#CCCCCC" placeholder="请输入手机号" />

				<view @tap="getPhoneCode" v-bind:class="[isTrue ? 'getCodeBtn' : 'unGet']">
					{{phoneCode}}
				</view>
			</view>
			<view class="list-call">
				<input class="biaoti" type="text" v-model="code" maxlength="6" placeholder-style="color:#CCCCCC" placeholder="请输入验证码" />
			</view>
			<view class="list-call">
				<input class="biaoti" type="password"  v-model="pwd" maxlength="20" placeholder-style="color:#CCCCCC"
				 placeholder="请输入密码"/>
				
			</view>
			<text class="desction">5-20个字母、数字以及标点符号（除空格）,字母、数字和标点符号至少包含2种</text>
		</view>
		<view class="btn" @tap="submit">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: false,
				phoneCode: "获取验证码",
				isTrue: true,
				phone: "",
				pwd: "",
				code:""
			}
		},
		methods: {
			getPhoneCode() {
				if (this.phone.length == 0) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return false;
				} else if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请输入正确得手机号',
						icon: 'none'
					})
					return false;
				} else {
					if (this.isTrue == true) {
						this.phoneCode = '60s'
						let time = 60;
						this.isTrue = false;
						var _this = this;
						var timer = setInterval(function() {
							time--
							_this.phoneCode = time + 's'
							if (time == 0) {
								clearInterval(timer)
								_this.phoneCode = '获取验证码';
								_this.isTrue = true;
							}
						}, 1000)
					}

					let data = {
						type: 3,
						mobile: this.phone
					}
					this.$http.post(this.$http.baseUrl + '/api/v1.0/sendMessage', data, res => {
						console.log(res.data)
						if (res.data.status == '000000') {
							uni.showToast({
								title: '验证码已下发，请注意查收',
								icon: 'none'
							})
						}
					})
				}

			},
			submit(){
				if (this.phone.length == 0) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return false;
				} else if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请输入正确得手机号',
						icon: 'none'
					})
					return false;
				}
				if(this.code.length == 0){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return false
				}
				if(this.pwd.length == 0){
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}else if(!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{5,20}$/.test(this.pwd)){
					uni.showToast({
						title: '请输入正确格式的密码',
						icon: 'none'
					})
					return false
				}
				let data = {
					mobile:this.phone,
					code:this.code,
					password:this.pwd
				}
				this.$http.post('/api/v1.0/updatePassword',data,res=>{
					console.log(res)
					if(res.data.status == '000000'){
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						uni.navigateBack()
					}else{
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	.list {
		display: flex;
		margin-top: 70upx;
		flex-direction: column;
		padding-top: 50upx;
		padding-left: 70upx;
		padding-right: 70upx;

		.list-call {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			color: #333333;
			font-size: 28upx;
			border-bottom: 1upx solid rgba(217, 217, 217, 1);

			.img {
				width: 40upx;
				height: 40upx;
			}

			.phone {
				padding-left: 16upx;
				width: 60%;
			}

			.getCodeBtn {
				color: #EA4E39;
				float: right;
				margin-right: 20upx;
			}

			.unGet {
				color: #D9D9D9;
				float: right;
				margin-right: 20upx;
			}

			.biaoti {
				flex: 1;
				text-align: left;
				line-height: 100upx;
				padding-left: 16upx;
			}
		}
	}
	.desction{
			font-size: 22upx;
			color: #ccc;
	}
	.btn {
		width: 616upx;
		height: 88upx;
		background: linear-gradient(360deg, rgba(227, 67, 57, 1) 0%, rgba(249, 98, 58, 1) 100%);
		border-radius: 20upx;
		font-size: 36upx;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50upx auto 30upx;
	}

	.uni-text {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 70upx;
		font-size: 24upx;
		font-weight: 500;
		color: rgba(77, 77, 77, 1);
	}
</style>
